<script setup>
import { useRouter, useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
import { findMonthCard } from '@/api/month.js'
const router = useRouter()
const route = useRoute()
const findlist = ref([])
// 列数据
const columns = [
  {
    title: '序号',
    dataIndex: 'index'
  },
  {
    title: '有效时间',
    dataIndex: 'cardStartDate',
    key: 'cardStartDate'
  },
  {
    title: '支付金额',
    dataIndex: 'paymentAmount',
    key: 'paymentAmount'
  },
  {
    title: '支付方式',
    dataIndex: 'paymentMethod',
    key: 'paymentMethod'
  },
  {
    title: '办理时间',
    dataIndex: 'createTime',
    key: 'createTime'
  },
  {
    title: '办理人',
    dataIndex: 'createUser',
    key: 'createUser'
  }
]
// const parames = {
//   page: 1,
//   pageSize: 10
// }
// 获取详情数据
const findcard = async () => {
  const res = await findMonthCard(route.params.id)
  findlist.value = res.data
  findlist.value.rechargeList.map((item) => {
    if (item.paymentMethod == 'Alipay') {
      item.paymentMethod = '支付宝'
    } else if (item.paymentMethod == 'cash') {
      item.paymentMethod = '现金'
    } else {
      item.paymentMethod = '微信'
    }
  })
  console.log(findlist.value)
}
onMounted(() => {
  findcard()
})
</script>
<template>
  <a-card>
    <div class="head">
      <span>
        <a-button type="text" @click="router.back()">返回</a-button>|
        <a-button type="text">查看详情</a-button>
      </span>
      <span style="cursor: pointer">黑马管理员</span>
    </div>
  </a-card>
  <a-card style="width: 80vw; margin: 2vw 10vw">
    <a-form>
      <a-form-item class="tops">车辆信息</a-form-item>
      <a-form-item>
        <div class="zhong">
          <a-button type="text">车主姓名：{{ findlist.personName }}</a-button>
          <a-button type="text">联系方式：{{ findlist.phoneNumber }}</a-button>
        </div>
      </a-form-item>
      <a-form-item>
        <div class="zhong">
          <a-button type="text">车牌号码：{{ findlist.carNumber }}</a-button>
          <a-button type="text">车辆品牌：{{ findlist.carBrand }}</a-button>
        </div>
      </a-form-item>
    </a-form>
  </a-card>
  <a-card style="width: 80vw; margin: 0vw 10vw">
    <a-form>
      <a-form-item class="tops">月卡缴费记录</a-form-item>
    </a-form>
    <a-table :columns="columns" :data-source="findlist.rechargeList" :pagination="false"></a-table>
  </a-card>
</template>
<style>
body {
  background-color: #f4f6f8 !important;
}
.head {
  display: flex;
  justify-content: space-between;
}
.zhong {
  display: flex;
  justify-content: space-around;
}
.tops {
  border-bottom: 1px solid #ddd;
}
</style>
